<template>
    <div class="cnet_container">
        <Search @search="onSearch" @reset="onReset" />
        <div class="btn_card">
            <el-button v-auth="'storeList:add'" type="primary" @click="toAddShop">新增店铺</el-button>
        </div>
        <Table :list="state.list" :tooltip="state.tooltip" @delete="onDelete" @edit="onEdit" @status="onStatus" />
        <Pagination
            :total="state.totalCount"
            :page-size="params.pageSize"
            :current-page="params.pageNum"
            @size-change="onSizeChange"
            @pageChange="onPageChange" />
    </div>
</template>
<script setup name="storeList">
import Search from './search.vue';
import Table from './table.vue';
import Pagination from '@/components/Pagination.vue';
import constants from '@/commons/constants';
import request from '@/request';
import { isNumber } from '@/commons/utils.js';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { reactive } from 'vue';

const SHOP_TOOLTIP = constants.SHOP_TOOLTIP;
const router = useRouter();
const params = reactive({
    pageNum: 1,
    pageSize: 10
});
const state = reactive({
    list: [],
    totalCount: 0,
    tooltip: {}
});
const getList = async () => {
    const { data } = await request('getShopList', params);
    state.list = data.list || [];
    state.totalCount = data.totalCount || 0;
};

const onSizeChange = v => {
    params.pageSize = v;
    getList();
};
const onPageChange = v => {
    params.pageNum = v;
    getList();
};
const onSearch = v => {
    Object.assign(params, v);
    getList();
};
const onReset = v => {
    Object.assign(params, v);
    getList();
};
const toAddShop = () => {
    router.push('/store/list/add');
};
/* 删除 */
const onDelete = async ({ shopId }) => {
    if (!isNumber(state.tooltip[shopId])) {
        const { data } = await request('getShopStatus', { shopId });
        state.tooltip[shopId] = data.isCanDelete;
        if ([1, 2].includes(data.isCanDelete)) {
            ElMessage.error(SHOP_TOOLTIP[data.isCanDelete]);
            return;
        }
    }
    if (state.tooltip[shopId] != 0) return;
    await request('deleteShop', { shopId });
    ElMessage.success('删除成功');
    getList();
};
/* 编辑 */
const onEdit = async ({ shopId }) => {
    router.push(`/store/list/edit?id=${shopId}`);
};
/* 启用/停用 */
const onStatus = async ({ shopId, status }) => {
    status = status == 1 ? 2 : 1;
    const message = status == 1 ? '启用成功' : '停用成功';
    if (status == 1) {
        await request('enableShop', { shopId, status });
    } else {
        await request('disableShop', { shopId, status });
    }
    ElMessage.success(message);
    getList();
};
</script>
<style lang="scss" scoped>
.cnet_container {
    .btn_card {
        margin-bottom: 16px;
        text-align: right;
    }
}
</style>
